import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useEffect, useRef, useState } from 'react';
import '../common/taskStyles.less';
import message from 'antd/lib/message';
import { onCloseModalCommon, tooltipLength } from '@/utils';
import { completeService } from '../services';
import { Col, Row, Spin } from 'antd';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import MyIcon from '@/components/MyIcon';

interface IWorkFlowHandNodeModalAPI {
  onClose: () => void;
  flowDetailInfo: Record<string, any>;
  requestController: string;
  reloadCallback: () => void;
  handTaskNodeList: Record<string, any>[];
}
export const WorkFlowHandNodeModal: React.FC<IWorkFlowHandNodeModalAPI> = ({
  onClose,
  flowDetailInfo,
  requestController,
  reloadCallback,
  handTaskNodeList,
}) => {
  /**弹框的ref*/
  const workFlowHandNodeModalRef: Ref<IOneModalRef> = useRef(null);

  /** 样式根节点 */
  const nodeCls = 'workflow-handnodes-';

  /** 保存选中的值 */
  const [checkInfoObj, setCheckInfoObj] = useState<Record<string, any>>({});

  /**
   * 办理流程回调
   * @param res
   */
  const completeCallBack = (res: any) => {
    if (res && res?.msgFlag) {
      // message.success(res?.msg);
      message.success(`提交至【${checkInfoObj?.flowName}】处办理`);
      onCloseModalCommon(workFlowHandNodeModalRef);
      reloadCallback();
    } else {
      message.error(res?.msg);
    }
  };

  /** 初始化选中第一个 */
  useEffect(() => {
    if (handTaskNodeList && handTaskNodeList?.length > 0) {
      setCheckInfoObj({
        ...handTaskNodeList?.[0],
      });
    }
  }, [handTaskNodeList]);

  /** 引入办理流程接口 */
  const { completeLoading, completeRun } = completeService(completeCallBack, requestController);

  /** 办理 */
  const onSave = () => {
    if (!(checkInfoObj && checkInfoObj?.flowID)) {
      message.warning('请选择任务节点！！！');
      return;
    }
    const params: Record<string, any> = {
      ...checkInfoObj,
      comment: `提交至【${checkInfoObj?.flowName}】处办理`,
      id: flowDetailInfo?.id,
      orderID: flowDetailInfo?.orderID,
      taskIsSign: flowDetailInfo?.taskIsSign,
      procInstID: flowDetailInfo?.procInstID,
      procDefID: flowDetailInfo?.procDefID,
    };

    completeRun(params);
  };

  return (
    <OneModal
      open={true}
      title={'选择审批环节'}
      ref={workFlowHandNodeModalRef}
      onCancel={onClose}
      bodyStyle={{
        padding: '0px',
        height: document.body.clientHeight * 0.4,
      }}
      onOk={onSave}
      confirmLoading={completeLoading}
    >
      <Spin spinning={completeLoading}>
        <ScrollBarLayout style={{ padding: '10px' }}>
          <div className={`${nodeCls}`}>
            <Row gutter={[8, 8]}>
              {handTaskNodeList?.map((item: any, index: number) => {
                return (
                  <Col span={24} key={`jump-task-node-${index}`}>
                    <div
                      className={Cls(`${nodeCls}nodeBoxDiv`, checkInfoObj?.flowID == item?.flowID ? `${nodeCls}nodeBoxCheck` : '')}
                      onClick={() => {
                        if (item?.flowID != checkInfoObj?.flowID) {
                          setCheckInfoObj(item);
                        }
                      }}
                    >
                      {item?.flowName ? tooltipLength(item?.flowName, 20) : '--'}
                      {checkInfoObj?.flowID == item?.flowID && (
                        <MyIcon
                          type="icon-xuanzejiaobiao"
                          style={{
                            fontSize: '50px',
                            position: 'absolute',
                            bottom: '-1px',
                            right: '-1px',
                          }}
                        />
                      )}
                    </div>
                  </Col>
                );
              })}
            </Row>
          </div>
        </ScrollBarLayout>
      </Spin>
    </OneModal>
  );
};
